<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="修改资料" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="modifydata">
			<view class="modifydata-wrap">
				<view v-if="modifyingFlag === true" class="modifydata-wrap-tel">
					<text class="modifydata-wrap-tel-title">手机号</text>
					<text class="modifydata-wrap-tel-tel modifydata-wrap-tel-tel-txt">{{ oldphone }}</text>
					<text @click="onClickShowModify" class="modifydata-wrap-tel-sendtxt">修改手机号</text>
				</view>
				<view v-if="modifyingFlag === false" class="modifydata-wrap-tel">
					<text class="modifydata-wrap-tel-title">手机号</text>
					<input placeholder="请输入手机号" v-model="phone" class="modifydata-wrap-tel-tel" />
					<text class="modifydata-wrap-tel-sendtxt" @click="getSendSms">{{ getMessageText }}</text>
				</view>
				<view v-if="modifyingFlag === false" class="modifydata-wrap-tel">
					<text class="modifydata-wrap-tel-title" v-model="code">验证码</text>
					<view class="modifydata-wrap-tel-code">
						<input class="modifydata-wrap-tel-code-input" v-model="code" placeholder="请输入验证码" />
						<image @click="onClickClearCode" class="modifydata-wrap-tel-code-close" :src="commonImg('close.png')"></image>
					</view>
				</view>
				<view class="modifydata-wrap-tel">
					<text style="box-sizing: border-box;padding-left: 14rpx;" class="modifydata-wrap-tel-title">生日</text>
					<view v-if="canModifyBirthday === false" modifydata-wrap-tel-code>
						<text class="modifydata-wrap-tel-code-input-date">{{ birthday }}</text>
					</view>
					<view v-if="canModifyBirthday === true" class="modifydata-wrap-tel-code">
						<picker class="modifydata-wrap-tel-code-input" mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
							<text v-if="birthday" class="modifydata-wrap-tel-code-input-date">{{ birthday }}</text>
							<text v-else style="color: #333333;" class="modifydata-wrap-tel-code-input-date">点击此处设置生日, 只允许设置一次</text>
						</picker>
						<image v-if="birthday" @click="onClickClearBirthday" class="modifydata-wrap-tel-code-close" :src="commonImg('close.png')"></image>
					</view>
				</view>
				<view class="modifydata-wrap-tel">
					<text style="box-sizing: border-box;padding-left: 14rpx;" class="modifydata-wrap-tel-title">性别</text>
					<view class="modifydata-wrap-tel-sex">
						<view class="modifydata-wrap-tel-sex-item" @click="selectSex('1')">
							<image :src="sex === '1' ? commonImg('select.png') : commonImg('no-select.png')" class="modifydata-wrap-tel-sex-item-img"></image>
							<text class="modifydata-wrap-tel-sex-item-txt">男</text>
						</view>
						<view class="modifydata-wrap-tel-sex-item" @click="selectSex('0')">
							<image :src="sex === '0' ? commonImg('select.png') : commonImg('no-select.png')" class="modifydata-wrap-tel-sex-item-img"></image>
							<text class="modifydata-wrap-tel-sex-item-txt">女</text>
						</view>
					</view>
				</view>
			</view>
			<view class="modifydata-savebtn">
				<button class="modifydata-savebtn-btn" @click="updateBirthdayOrSex">保存</button>
			</view>
		</view>
	</view>
</template>
<script>
	import { config } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		mixins: [myMixin],
		components: {
			uniNavBar
		},
		data() {
			return {
				oldphone: '',
				phone: '',
				birthday: '',
				code: '',
				sex: '', // 性别，1男，0女
				countdown: 60,
				timer: null,
				getMessageText: '发送验证码',
				modifyingFlag: true,
				canModifyBirthday: true
			}
		},
		// 页面卸载的时候，一定要清除定时器
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer)
			}
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			onClickShowModify() {
				this.modifyingFlag = false
			},
			onClickClearBirthday() {
				this.birthday = ''
			},
			onClickClearCode() {
				this.code = ''
			},
			// 倒计时操作
			beginSetTime() {
				if (this.countdown === 0) {
					this.getMessageText = '发送验证码'
					this.countdown = 60
					this.timer = null
					return
				} else {
					this.getMessageText = `${this.countdown}s后重发`
					this.countdown--
				}
				this.timer = setTimeout(() => {
					this.beginSetTime()
				}, 1000)
			},
			// 获取验证码按钮点击事件
			getSendSms() {
				const phone = this.phone
				if (!phone) {
					uni.showToast({
						title: "手机号码不能为空",
						icon: 'none'
					})
					return false
				}
				if (!(/^1[345678]\d{9}$/.test(phone))) {
					uni.showToast({
						title: '手机号码格式错误',
						icon: 'none'
					})
					return false
				}
				this.beginSetTime()
				uni.request({
					url: `${config.api_base_url_tools}sms`,
					method: 'POST',
					data: {
						sender: 'member',
						flag: 'updatePhone',
						phone: phone
					},
					success: ((res) => {
						let {
							status,
							data
						} = res.data
						if (status.flag === true) {
							uni.showToast({
								icon: 'none',
								title: '发送成功'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: status.msg
							})
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '发送失败, 网络异常'
						})
					})
				})
			},
			// 生日信息改变
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange(e) {
				this.birthday = e.target.value
			},
			//选择性别
			selectSex(sex) {
				this.sex = sex
			},
			// 查询会员详情
			_findMemberDetail() {
				uni.showLoading({ title: '加载中' })
				uni.request({
					url: `${config.api_base_url}member/member/findByToken`,
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					success: ((res) => {
						let {
							status,
							data
						} = res.data
						console.log(res.data.data)
						if (status.flag === true) {
							if (data.phone) {
								this.oldphone = data.phone
							} else {
								this.oldphone = ''
							}
							if (data.birthday) {
								this.birthday = data.birthday
							} else {
								this.birthday = undefined
							}
							this.sex = data.sex
							if (!this.birthday) {
								this.canModifyBirthday = true
							} else {
								this.canModifyBirthday = false
							}
						} else {
							uni.showToast({
								title: status.msg,
								icon: 'none'
							});
						}
					}),
					fail: (() => {
						uni.showToast({
							title: '网络异常, 暂时不能查询',
							icon: 'none'
						})
					}),
					complete: (() => {
						uni.hideLoading()
					})
				});
			},
			// 只修改生日或者是性别
			updateBirthdayOrSex() {
				uni.showLoading({ title: '加载中' })
				if (this.modifyingFlag === true) { // true的时候不修改手机号
					const obj = {}

					if (this.canModifyBirthday === true) {
						const birthday = this.birthday
						if (birthday) {
							obj.birthday = birthday
						}
					}
					const sex = this.sex

					if (sex !== '0' && sex !== '1') {} else {
						obj.sex = sex
					}
					uni.request({
						url: `${config.api_base_url}member/member/update`,
						method: 'PUT',
						data: obj,
						header: {
							AUTH: 'ROBOT ' + uni.getStorageSync('token')
						},
						success: ((res) => {
							let {
								status,
								data
							} = res.data
							if (status.flag === true) {
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								})
								this._findMemberDetail()
							} else {
								uni.showToast({
									title: status.msg,
									icon: 'none'
								})
							}
						}),
						fail: (() => {
							uni.showToast({
								title: '修改失败, 网络异常',
								icon: 'none'
							})
						}),
						complete: (() => {
							uni.hideLoading()
						})
					})
				} else if (this.modifyingFlag === false) { // false的时候是要修改手机号的
					if (!this.phone) {
						uni.showToast({
							icon: 'none',
							title: '请填写手机号'
						})
						return false
					}
					if (!this.code) {
						uni.showToast({
							icon: 'none',
							title: '请填写验证码'
						})
						return false
					}
					const obj = {}
					const phone = this.phone
					const code = this.code
					const birthday = this.birthday
					const sex = this.sex
					if (this.canModifyBirthday === true) {
						if (birthday) {
							obj.birthday = birthday
						}
					}
					if (sex !== '0' && sex !== '1') {
					} else {
						obj.sex = sex
					}
					obj.phone = phone
					obj.code = code
					uni.request({
						url: `${config.api_base_url}member/member/update`,
						method: 'PUT',
						data: obj,
						header: {
							AUTH: 'ROBOT ' + uni.getStorageSync('token')
						},
						success: ((res) => {
							let {
								status,
								data
							} = res.data
							if (status.flag === true) {
								uni.showToast({
									title: '资料修改修改成功',
									icon: 'none'
								})
								this._modifyPhone(phone, code)
							} else {
								uni.showToast({
									title: status.msg,
									icon: 'none'
								})
							}
						}),
						fail: (() => {
							uni.showToast({
								title: '修改失败, 网络异常',
								icon: 'none'
							})
						})
					})
				}
			},
			_modifyPhone(phone, code) {
				uni.request({
					url: `${config.api_base_url}member/member/updatePhone/${code}`,
					method: 'PUT',
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('token')
					},
					data: {
						phone: phone
					},
					success: ((res) => {
						let {
							status,
							data
						} = res.data
						if (status.flag === true) {
							uni.showToast({
								icon: 'none',
								title: '修改手机号成功'
							})
							this._findMemberDetail()
							setTimeout(() => {
								uni.removeStorageSync('memberId')
								uni.removeStorageSync('role')
								uni.removeStorageSync('token')
								uni.removeStorageSync('openId')
								uni.reLaunch({
									url: '../verificationcodelogin/verificationcodelogin'
								})
							}, 1500)
						} else {
							uni.showToast({
								icon: 'none',
								title: status.msg
							})
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '修改手机号失败, 网络异常'
						})
					})
				})
			},
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					title: '尚未登录, 请先登录',
					icon: 'none'
				})
				setTimeout(() => {
					uni.removeStorageSync('role')
					uni.removeStorageSync('memberId')
					uni.removeStorageSync('cartList')
					uni.removeStorageSync('token')
					uni.removeStorageSync('openId')
					uni.redirectTo({
						url: '../login/login'
					})
				}, 777)
				return false
			}
			this._findMemberDetail()
		},
		computed: {
			startDate() {
				return this.getDate('start')
			},
			endDate() {
				return this.getDate('end')
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style scoped>
	.modifydata {
		width: 100%;
		box-sizing: border-box;
		padding-top: 14rpx;
		padding-left: 16rpx;
		padding-right: 14rpx;
	}

	.modifydata-wrap {
		width: 100%;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 32rpx;
		padding-left: 38rpx;
		padding-right: 26rpx;
		padding-bottom: 38rpx;
	}

	.modifydata-wrap-tel {
		display: flex;
		width: 100%;
		height: 72rpx;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.modifydata-wrap-tel:last-child {
		margin-bottom: 0;
	}

	.modifydata-wrap-tel-title {
		width: 114rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.modifydata-wrap-tel-tel {
		padding: 0;
		margin: 0;
		outline: none;
		border: none;
		background-color: #fff;
		width: 372rpx;
		height: 100%;
		border-radius: 12rpx;
		box-sizing: border-box;
		border: 2rpx solid rgba(221, 221, 221, 1);
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		font-size: 30rpx;
	}

	.modifydata-wrap-tel-tel-txt {
		border: none;
		padding-left: 0;
	}

	.modifydata-wrap-tel-sendtxt {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: #1677FF;
		margin-right: 0;
		margin-left: auto;
	}

	.modifydata-wrap-tel-code {
		flex: 1;
		height: 100%;
		border: 2rpx solid rgba(221, 221, 221, 1);
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-radius: 12rpx;
	}

	.modifydata-wrap-tel-code-input {
		margin: 0;
		outline: none;
		border: none;
		background-color: #fff;
		flex: 1;
		height: 100%;
		box-sizing: border-box;
		padding-left: 22rpx;
	}

	.modifydata-wrap-tel-code-close {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		margin-right: 26rpx;
	}

	.modifydata-wrap-tel-code-input-date {
		font-size: 30rpx;
		line-height: 72rpx;
	}

	.modifydata-wrap-tel-code-input-nodate {
		font-size: 30rpx;
		line-height: 72rpx;
		color: #CCCCCC;
	}

	.modifydata-wrap-tel-sex {
		display: flex;
		align-items: center;
	}

	.modifydata-wrap-tel-sex-item {
		display: flex;
		align-items: center;
		margin-right: 74rpx;
	}

	.modifydata-wrap-tel-sex-item:last-child {
		margin-right: 0;
	}

	.modifydata-wrap-tel-sex-item-img {
		width: 33rpx;
		height: 33rpx;
		border-radius: 50%;
		margin-right: 18rpx;
	}

	.modifydata-wrap-tel-sex-item-txt {
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
	}

	.modifydata-savebtn {
		width: 100%;
		height: 82rpx;
		box-sizing: border-box;
		padding-left: 46rpx;
		padding-right: 44rpx;
		position: fixed;
		left: 0;
		bottom: 60rpx;
	}

	.modifydata-savebtn-btn {
		width: 100%;
		height: 100%;
		border-radius: 14rpx;
		background-color: #F02230;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #fff;
	}
</style>
